<template>
	<view class="login">
		<!-- 导航栏 -->
		<view class="login-head">
			<view style="width:70%; height: 100rpx; line-height: 180rpx; margin-bottom: 10rpx;">
				<image style="width: 100rpx; height: 100rpx; position: absolute; top: 75rpx; "
					src="../../static/icon/left(4).png" @click="BackToLogin"></image>
				<text style="margin-left: 200rpx;  padding-top: 20rpx;">欢迎注册</text>
			</view>
		</view>

		<!-- 主标题模块 -->
		<view class="login-title">
			<view class="login-font">
				<text style="font-family:Kristen ITC!important;">Join In</text>
			</view>
			<view class="login-font" style="margin-top: 20rpx; font-family: 华文楷体; font-weight: bold;">
				<text>衣碳揪镜</text>
			</view>
			<view class="login-font" style="margin-top: 20rpx; font-family: 华文楷体; ">
				<text style="font-size: 36rpx;">让服装产品的碳足迹清澈如镜</text>
			</view>
		</view>

		<!-- 注册组件模块 -->
		<view class="module">
			<view class="selecct">
				<template v-if="test">
					<text style="color: white; font-size: 30rpx;">注册管理员用户</text>
				</template>
				<template v-else>
					<text style="color: white; font-size: 30rpx;">注册普通用户</text>
				</template>
				<switch color="#172349" @change="switch1Change" style="margin-left: 30rpx; transform:scale(0.6)" />
			</view>

			<template v-if="test">
				<view class="input-info">
					<text class="login_name">企业名称 {{' '}}
						<text style="color: darkred;">{{' *'}}</text>
					</text>
					<image class="login_button"></image>
					<input v-model="cn" class="phone" maxlength="20" style="margin-left: 40rpx;" />
				</view>
				<!-- 
					<view class="input-info">
						<text class ="login_name" style="font-size: 35rpx;"  space="ensp" decode="true" >统&ensp;一&ensp;社&ensp;会\n信&ensp;用&ensp;代&ensp;码</text>
						<image class="login_button" src="../../static/imgs/login.png"></image>
						<input v-model="code" class="phone" maxlength="18" />
					</view> -->

				<view class="input-info">
					<text class="login_name">联&ensp;系&ensp;人{{' '}}
						<text style="color: darkred;">{{' *'}}</text>
					</text>
					<image class="login_button"></image>
					<input v-model="lar" class="phone" maxlength="18" style="margin-left: 40rpx;" />
				</view>
				<view class="input-info">
					<text class="login_name">手&ensp;机&ensp;号{{' '}}
						<text style="color: darkred;">{{' *'}}</text>
					</text>
					
					<image class="login_button"></image>
					<input v-model="telephone" class="phone" maxlength="18" style="margin-left: 40rpx;" />
				</view>
				<view class="input-info">
					<text class="login_name">密&ensp;&ensp;&ensp;&ensp;码 {{' '}}
						<text style="color: darkred;">{{' *'}}</text>
					</text>
					<image class="login_button"></image>
					<input v-model="password" class="phone" maxlength="18" password="true"
						style="font-size: 56rpx; bottom: 35rpx; margin-left: 40rpx;" />
				</view>
				<view class="input-info" style=" position: fixed;top: 1100rpx;left: 60rpx;">
					<text class="login_name"
						style=" padding: 20rpx; border-radius: 50rpx; padding-left: 144rpx; background-color: rgb(79, 94, 114,0.3)"
						@click="registeredUser ">注册</text>
					<image class="login_button" style="width: 35%;" @click="LoginregisteredUser"></image>
				</view>
			</template>

			<!-- 				<view>
						<view>
							<view class="input-info">
								<text class ="login_name">企业邮箱 *</text>
								<image class="login_button" src="../../static/imgs/login.png"></image>
								<input v-model="uscc" class="phone" maxlength="18" />
							</view>
							
							<view class="input-info">
								<text class ="login_name">企业地址 *</text>
								<image class="login_button" src="../../static/imgs/login.png"></image>
								<input v-model="lar" class="phone" maxlength="18"  />
							</view>

						<view class="input-info">
								<text class ="login_name">企业地址 *</text>
								<image class="login_button" src="../../static/imgs/login.png"></image>
								<input v-model="address" class="phone" maxlength="18" />
								<text class ="code" @click="get_code">获取验证码</text>
							</view>
						</view>
					</view>
				 -->

			<template v-else>
				<view>
					<view class="input-info">
						<text class="login_name">企业&ensp;ID</text>
						<image class="login_button"></image>
						<input v-model="cid" class="phone" maxlength="18" />
					</view>
					<view class="input-info">
						<text class="login_name">手机号 {{' '}}
							<text style="color: darkred;">{{' *'}}</text>
						</text>
						<image class="login_button"></image>
						<input v-model="telephone" type="number" class="phone" maxlength="11" />
					</view>
					<view class="input-info">
						<text class="login_name">密&ensp;&ensp;码 {{' '}}
							<text style="color: darkred;">{{' *'}}</text>
						</text>
						<image class="login_button"></image>
						<input v-model="password" class="phone" maxlength="18" password="true"
							style="font-size: 56rpx; bottom: 35rpx;" />
					</view>
					<view class="input-info" style=" position: fixed;top: 1100rpx;left: 60rpx;">
						<text class="login_name"
							style=" padding: 20rpx; border-radius: 50rpx; padding-left: 144rpx; background-color:  rgb(79, 94, 114,0.3)"
							@click="registeredUser ">注册</text>
						<image class="login_button" style="width: 35%;" @click="registeredUser"></image>
					</view>
				</view>
			</template>
		</view>
	</view>
</template>

<script>
	var _self;

	import {regUser as regUserApi} from '@/api/user'
	import {regAdmin as regAdminApi} from '@/api/user'
	export default {
		data() {
			return {
				// 是否注册管理员账户
				test: false,
				//是否有空选项
				cn: '',
				lar: '',
				telephone: '',
				password: '',
				cid: '',
			}
		},

		onLoad() {
			_self = this
		},
		onPullDownRefresh() {
			URL: '/pages/login/login'
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			async registeredUser() {
				// if(this.test==true){  如果为true则代表注册的是管理员账户
				// 	if(this.telephone=='' || this.password=='' || this.cn=='' ||this.lar=='' ){
				// 		uni.showToast({
				// 			title:'请完善注册信息！',
				// 			duration:1000,
				// 			icon:"error"
				// 		})
				// 	}else{

				// 		uni.showToast({
				// 			title:'注册成功！',
				// 			duration:1000,
				// 			icon:"success"
				// 		})
				// 		setTimeout(()=>{
				// 			 uni.navigateTo({
				// 			  url: '/pages/login/login'
				// 			 }) 
				// 		},1000)
				// 	}
				// }else{
				// 	if(this.telephone=='' || this.password==''){
				// 		uni.showToast({
				// 			title:'请完善注册信息！',
				// 			duration:1000,
				// 			icon:"error"
				// 		})
				// 	}else{
				// 		uni.showToast({
				// 			title:'注册成功！',
				// 			duration:1000,
				// 			icon:"success"
				// 		}),
				// 		 setTimeout(()=>{
				// 			 uni.navigateTo({
				// 			  url: '/pages/login/login'
				// 			 }) 
				// 		 },1000)
				// 	}
				// }
				if (this.test == true) {
					if (this.cn == '' || this.lar == '' || this.telephone == '' || this.password == '') {
						uni.showToast({
							title: '请完善注册信息！',
							duration: 1000,
							icon: "error"
						})
					} else {
						var phone = this.telephone;
						var strTemp = /^1[3|4|5|6|7|8|9][0-9]{9}$/;
						if (strTemp.test(phone)) {
							const data = {
								cn: this.cn,
								lar: this.lar,
								tel: this.telephone,
								password: this.password
							}
							const res = await regAdminApi(data)
							console.log('res=' + res)
							console.log('res.status=' + res.status)
							console.log('this.API_STATUS_CODE=' + this.API_STATUS_CODE)
							
							if (res.status === this.API_STATUS_CODE.SUCCESS) {
								uni.showToast({
										title: '注册成功！',
										duration: 1000,
										icon: "success"
									}),
									setTimeout(() => {
										uni.navigateTo({
											url: '/pages/login/login'
										})
									}, 1000)
							} else {
								uni.showToast({
									title: res.message,
									duration: 1000,
									icon: "error"
								})
							}
						} else {
							uni.showToast({
								icon: 'none',
								title: '请输入正确的电话'
							});
						}
					}
				} else {
					if (this.telephone == '' || this.password == '') {
						uni.showToast({
							title: '请完善注册信息！',
							duration: 1000,
							icon: "error"
						})
					} else {
						console.log(this.cid);
						var phone = this.telephone;
						var strTemp = /^1[3|4|5|6|7|8|9][0-9]{9}$/;
						if (strTemp.test(phone)) {
							const data = {
								cid: this.cid,
								telephone: this.telephone,
								password: this.password
							}
							console.log("data.cid="+data.cid);
							const res = await regUserApi(data)
							if (res.status === this.API_STATUS_CODE.SUCCESS) {
								console.log("res.mes="+res.mes)
								uni.showToast({
										title: '注册成功！',
										duration: 1000,
										icon: "success"
									}),
									setTimeout(() => {
										uni.navigateTo({
											url: '/pages/login/login'
										})
									}, 1000)
							} else {
								console.log(res.mes)
								uni.showToast({
									title: res.mes,
									duration: 1000,
									icon: "error"
								})
							}
						} else {
							uni.showToast({
								icon: 'none',
								title: '请输入正确的电话'
							});
							return false
						}
					}
							// const data = {
							// 	cid: this.cid,
							// 	telephone: this.telephone,
							// 	password: this.password
							// }
							// console.log('data='+data.cid)
							// const res = await regUserApi(data)
							// console.log(res.status)
							// console.log(res.mes)
				}
			},
			BackToLogin() {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			},
			getValue(e) {
				console.log(e);
			},
			get_code() {

			},
			switch1Change() {
				this.flag = false,
					this.test = !this.test
					this.cn = '',
					this.lar = '',
					this.telephone = '',
					this.password = '',
					this.cid = ''
			}
		},
		components: {},
	}
</script>

<style lang="scss" scoped>
	.login {
		overflow: hidden;
		width: 100%;
		height: 100%;
		text-align: center;
		background: linear-gradient(to top,#172349,#1d2e55,#203f5f,#4f5e72);

		.login-head {
			width: 100%;
			height: 180rpx;
			line-height: 180rpx;

			text {
				height: 75rpx;
				line-height: 250rpx;
				width: 75rpx;
				text-align: center;
				margin-top: 50rpx;
				font-size: 42rpx;
				color: #ffffff;
			}
		}

		.login-title {
			height: 300rpx;
			width: 100%;
			margin-top: 40rpx;

			.login-font {
				height: 80rpx;
				width: 100%;
				line-height: 80rpx;

				text {
					width: 60%;
					height: 80rpx;
					line-height: 80rpx;
					color: white;
					text-align: center;
					font-size: 72rpx;

				}
			}
		}

		.module {
			width: 100vw;
			height: 70vh;

			.input-info {
				position: relative;

				.login_button {
					width: 85%;
					height: 100rpx;
					margin-top: 20rpx;

				}

				.login_name {
					position: absolute;
					display: block;
					width: 200rpx;
					left: 160rpx;
					bottom: 35rpx;
					color: #ffffff;
					text-align: left;
					font-size: 40rpx;
					margin-left: -20rpx;
				}

				.phone {
					position: absolute;
					display: block;
					line-height: 100rpx;
					width: 38%;
					left: 300rpx;
					bottom: 30rpx;
					color: #ffffff;
					margin-left: 10rpx;
					border-bottom: 2rpx solid #b6b6b6;
					text-align: left;
					margin-bottom: 5rpx;
					font-size: 43rpx;
				}
			}

			.selecct {
				width: 100%;
				margin-left: 30rpx;
			}
		}
	}
</style>
